<template>
  <div>
    <div>child子组件 - {{ props.title }}</div>
    <button @click="handleClick">btn</button>
    <slot></slot>
    <p>count: {{ count }}</p>
  </div>
</template>

<script setup>
import { inject } from "vue";

// 使用defineProps来接受自定义属性的值
// defineProps是不需要引入，可以直接用的

// 括号里面的内容和之前的props选项一样，可以写数组或者对象
// const props = defineProps(["title"]);
const props = defineProps({
  // title: String,
  title: {
    type: String,
    required: true,
  },
});

const emit = defineEmits(["abc"]);
const handleClick = () => {
  // this.$emit("abc")
  emit("abc", 123);
  // countAdd();
};

// inject还可以接受第二个参数，作为默认值
const { count } = inject("count", 100);
</script>
